import React from 'react';
import { TabBar} from 'antd-mobile';
import styles from './Footer.css';
import { connect } from 'dva';
import cons from '../constan'
const Footer = ({dispatch, wselect}) => {
  function changepage(pages){
    dispatch({
        type: 'pagedata/changepage',
        payload: pages,
    });
  }
  return (
    <div className = {styles.foot}>
        <TabBar
            unselectedTintColor="#949494"
            tintColor="#33A3F4"
            barTintColor="white"
            tabBarPosition="bottom"
            noRenderContent={true}
        >    
            <TabBar.Item
                title="首页"
                key="index"
                icon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://mzhuoyi-1253153042.cos.ap-chengdu.myqcloud.com/icon/home.png) center center /  21px 21px no-repeat' }}
                />
                }
                selectedIcon={<div style={{
                width: '22px',
                height: '22px',
                background: 'url(https://mzhuoyi-1253153042.cos.ap-chengdu.myqcloud.com/icon/home-fill.png) center center /  21px 21px no-repeat' }}
                />
                }
                badge={1}
                selected = {wselect === cons.HomePage}
                onPress={() => {
                  changepage(cons.HomePage);
                }}
                data-seed="logId"
            >
            </TabBar.Item>
            <TabBar.Item
                icon={
                <div style={{
                    width: '22px',
                    height: '22px',
                    background: 'url(https://mzhuoyi-1253153042.cos.ap-chengdu.myqcloud.com/icon/calendar.png) center center /  21px 21px no-repeat' }}
                />
                }
                selected = {wselect === cons.ClassPage}
                onPress={() => {
                    changepage(cons.ClassPage);
                }}
                selectedIcon={
                <div style={{
                    width: '22px',
                    height: '22px',
                    background: 'url(https://mzhuoyi-1253153042.cos.ap-chengdu.myqcloud.com/icon/calendar-fill.png) center center /  21px 21px no-repeat' }}
                />
                }
                title="课程表"
                key="calendar"
                dot
            >
                {}
            </TabBar.Item>
            <TabBar.Item
                icon={{ uri: 'https://mzhuoyi-1253153042.cos.ap-chengdu.myqcloud.com/icon/user.png' }}
                selectedIcon={{ uri: 'https://mzhuoyi-1253153042.cos.ap-chengdu.myqcloud.com/icon/user-fill.png' }}
                title="我的"
                selected = {wselect === cons.MyPage}
                onPress={() => {
                    changepage(cons.MyPage);
                }}
                key="my"
            >
                {}
            </TabBar.Item>
        </TabBar>
    </div>
  );
};

Footer.propTypes = {
};

export default connect ()(Footer);
